<template>
  <div
    class="el-progress"
    :class="[
      'el-progress--' + type,
      status ? 'is-' + status : '',
      {
        'el-progress--without-text': !showText,
        'el-progress--text-inside': textInside,
      },
    ]"
    role="progressbar"
    :aria-valuenow="percentage"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div class="el-progress-bar" v-if="type === 'line'">
      <div
        class="el-progress-bar__outer"
        :style="{ height: strokeWidth + 'px' }"
      >
        <div class="el-progress-bar__inner" :style="barStyle" v-if="bartype != 0">
          <div class="el-progress-bar__innerText" v-if="showText && textInside">
            {{ content }}
          </div>
        </div>
        <!-- <div class="el-progress-bar__inner" :style="barStyle3"></div> -->
        <div class="el-progress-bar__inner" :style="barStyle2" v-if="bartype != 0"></div>
        <div class="el-progress-bar__inner" :style="barStyle1" v-if="bartype != 0"></div>
      </div>
    </div>
    <div
      class="el-progress-circle"
      :style="{ height: width + 'px', width: width + 'px' }"
      v-else
    >
      <svg viewBox="0 0 100 100">
        <path
          class="el-progress-circle__track"
          :d="trackPath"
          stroke="#e5e9f2"
          :stroke-width="relativeStrokeWidth"
          fill="none"
          :style="trailPathStyle"
        ></path>
        <path
          class="el-progress-circle__path"
          :d="trackPath"
          :stroke="stroke"
          fill="none"
          stroke-linecap="round"
          :stroke-width="percentage ? relativeStrokeWidth : 0"
          :style="circlePathStyle"
        ></path>
      </svg>
    </div>
    <div
      class="el-progress__text"
      v-if="showText && !textInside"
      :style="{ fontSize: progressTextSize + 'px' }"
    >
      <template v-if="!status">{{ content }}</template>
      <i v-else :class="iconClass"></i>
    </div>
  </div>
</template>
<script>
import elprogress from "element-ui/packages/progress/src/progress";
//C:\Users\Administrator\Desktop\FOUR\daping_front_8083\node_modules\_element-ui@2.12.0@element-ui\packages\progress\src\progress.vue
export default {
  name: "commongongrejindutiaobase",
  extends: elprogress,
  props:{
    bartype: {
      type: Number,
      default: 0
    }
  },
  mounted() {
  },
  computed: {
    barStyle1() {
      const style = {};
      style.width = 5 + "%";
      style.backgroundColor = '#39cd6abb'
      return style;
    },
    barStyle2() {
      const style = {};
      style.width = 10 + "%";
      style.backgroundColor = '#e4e26abb'
      return style;
    },
    barStyle3() {
      const style = {};
      style.width = 30 + "%";
      style.backgroundColor = 'blue'
      return style;
    },
  },
};
</script>
<style lang="scss">

</style>
